

.container{
	height: 100vh;
	width: 100vw;
	position: relative;
	overflow: hidden;
	.mapContent {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 0;
		&:before, &:after {
			width: 480px;
			height: 100%;
			display: block;
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			opacity: 0.6;
			background: linear-gradient( 90deg, rgba(0,21,18,0.8) 0%, rgba(0,21,18,0.32) 78%, rgba(0,20,21,0) 100%);
		}
		&:after {
			right: 0;
			left: auto;
			background: linear-gradient( 90deg, rgba(26,26,66,0) 0%, rgba(18,36,37,0.72) 43%, rgba(15,33,30,0.8) 100%);
		}
	}
}


.header {
	position: absolute;
	top: -10px;
	width: 100%;
	background: url(../../../assets/images/dashboard/header-bg.png) center center no-repeat;
	background-size: cover;
	height: 95px;
	z-index: 3;
	.left {
		position: relative;
		.backBox {
			position: absolute;
			left: 20px;
			top: 25px;
			font-size: 16px;
			color: white;
			cursor: pointer;
			z-index: 3;
			span {
				margin-left: 10px;
			}
		}
	}
	.title {
		font-size: 24px;
		color: white;
		font-weight: bold;
		width: 400px;
		height: 23px;
		position: absolute;
		top: 32px;
		left: calc(50% - 180px);
		letter-spacing: 6px;
	}
	.right {
		position: absolute;
		right: 20px;
		height: 70px;
		display: flex;
		justify-content: flex-end;
		.time {
			display: flex;
			align-items: center;
			.date {
				font-size: 14px;
				color: #BECBE8;
			}
			.hour {
				font-size: 24px;
				color: #F4F4FA;
				font-weight: 700;
				margin-left: 16px;
			}
		}
		.user {
			display: flex;
			align-items: center;
			position: relative;
			margin-left: 32px;
			&:before {
				display: block;
				content: '';
				width: 2px;
				height: 32px;
				position: absolute;
				left: -16px;
				top: calc(50% - 16px);
				background: #5A5A89;
			}
			span {
				color: #FFFFFF;
				font-size: 16px;
				margin-left: 6px;
			}
		}
	}
}

.midModule {
	position: absolute;
	top: 120px;
	width: 1052px;
	left: calc(50% - 526px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 2;
	.cardItem {
		width: 245px;
		height: 80px;
		background: url(../../../assets/images/dashboard/num-card-bg.png) center center no-repeat;
		background-size: cover;
		position: relative;
		box-sizing: border-box;
		padding-left: 90px;
		display: flex;
		align-items: center;
		.icon {
			display: block;
			width: 24px;
			height: 24px;
			position: absolute;
			left: 28px;
			top: calc(50% - 12px);
			background: url(../../../assets/images/dashboard/num-task.png) center center no-repeat;
			background-size: cover;
			&.task {
				background: url(../../../assets/images/dashboard/num-task.png) center center no-repeat;
				background-size: cover;
			}
			&.line {
				background: url(../../../assets/images/dashboard/num-line.png) center center no-repeat;
				background-size: cover;
			}
			&.car {
				background: url(../../../assets/images/dashboard/num-car.png) center center no-repeat;
				background-size: cover;
			}
			&.alert {
				background: url(../../../assets/images/dashboard/num-alert.png) center center no-repeat;
				background-size: cover;
			}
		}
		.info {
			.label {
				font-size: 12px;
				color: #C8D0FF;
			}
			.value {
				font-size: 18px;
				color: #F4F4FA;
			}
		}
	}
}

.leftModule {
	width: 376px;
	height: 100%;
	position: absolute;
	left: 0;
	padding-top: 100px;
	display: flex;
	flex-direction: column;
	z-index: 2;
	.task {
		width: 100%;
		height: 208px;
	}
	.alert {
		margin-top: 24px;
	}
}

.rightModule {
	width: 400px;
	height: 100%;
	position: absolute;
	right: 0;
	padding-top: 100px;
	display: flex;
	flex-direction: column;
	z-index: 2;
}


.carList {
	display: flex;
	flex-wrap: wrap;
	margin-top: 15px;
	overflow-y: auto;
	.carItem {
		position: relative;
		display: block;
		width: 168px;
		height: 85px;
		background: rgba(0, 220, 211, 0.1);
		margin-right: 16px;
		margin-bottom: 26px;
		box-sizing: border-box;
		padding: 16px 8px;
		&.tasking {
			background: rgba(0, 220, 211, 0.1);
			.status {
				background: #2DA641;
				color: white;
			}
		}
		&.space {
			background: rgba(200, 208, 255, 0.1);
			.status {
				background: white;
				color: #323233;
			}
		}
		&.charge {
			background: rgba(251, 170, 53, 0.1);
			.status {
				background: #FBAA35;
				color: white;
			}
		}
		&:nth-child(2n) {
			margin-right: 0 !important;
		}
		.status {
			position: absolute;
			right: 0;
			top: 0;
			width: 48px;
			height: 18px;
			border-radius: 2px;
			font-size: 12px;
			line-height: 18px;
			text-align: center;
			background: #2DA641;
			color: white;
		}
		.name {
			font-size: 24px;
			color: #F4F4FA;
		}
		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 8px;
			.type {
				font-size: 12px;
				color: #C8D0FF;
			}
			.other {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.name {
					font-size: 12px;
					color: #C8D0FF;
				}
			}
		}
	}
}

.commonBox {
	background: rgba(13, 27, 28, 0.59);
	box-sizing: border-box;
	padding: 0 24px 24px 24px;
	width: 100%;
	&.car {
		min-height: calc(100% - 100px);
		overflow-y: auto;
	}
	&.alert {
		min-height: calc(100% - 332px);
	}
}

.moduleHeader {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	height: 40px;
	&:after {
		display: block;
		width: 78px;
		height: 2px;
		background: url(../../../assets/images/dashboard/title-module-border.png) center center no-repeat;
		background-size: cover;
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.icon {
		display: block;
		width: 20px;
		height: 20px;
		background: url(../../../assets/images/dashboard/pie.png) center center no-repeat;
		background-size: cover;
		&.iconCar {
			background: url(../../../assets/images/dashboard/car.png) center center no-repeat;
			background-size: cover;
			width: 16px;
			height: 16px;
		}
		&.iconAlert {
			background: url(../../../assets/images/dashboard/alert.png) center center no-repeat;
			background-size: cover;
			width: 16px;
			height: 16px;
		}
		&.iconCamera {
			background: url(../../../assets/images/dashboard/camera.png) center center no-repeat;
			background-size: cover;
		}
	}
	.title {
		font-size: 14px;
		color: #F4F4FA;
		margin-left: 6px;
	}
}

.task {
	.taskContent {
		width: 100%;
		height: 128px;
		display: flex;
		margin-top: 16px;
		.pieContainer {
			display: block;
			width: 128px;
			height: 128px;
			background: rgba(200, 208, 255, 0.1);
			margin-right: 8px;
		}
		.legendList {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 192px;
				.color {
					display: block;
					width: 24px;
					height: 24px;
					background: rgba(200, 208, 255, 0.1);
					display: flex;
					align-items: center;
					justify-content: center;
					.block {
						width: 6px;
						height: 6px;
					}
				}
				.name {
					display: flex;
					justify-content: space-between;
					width: 160px;
					height: 24px;
					background: rgba(200, 208, 255, 0.1);
					box-sizing: border-box;
					padding: 0 7px;
					line-height: 24px;
					font-size: 12px;
					.label {
						color: #BECBE8;
					}
					.value {
						color: #F4F4FA;
						font-weight: 700;
					}
				}
			}
		}
	}
}

.alert {
	.staBox {
		display: flex;
		justify-content: space-between;
		background: rgba(200, 208, 255, 0.1);
		margin-top: 15px;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 33.33%;
			position: relative;
			height: 72px;
			&:last-child {
				&:after {
					display: none;
				}
			}
			&:after {
				display: block;
				content: '';
				width: 1px;
				height: 48px;
				background: #5A5A89;
				position: absolute;
				right: 0;
				top: calc(50% - 24px);
			}
			.label {
				display: flex;
				color: #C8D0FF;
				font-size: 12px;
			}
			.value {
				font-size: 24px;
				color: #F4F4FA;
			}
		}
	}
	.alertList {
		overflow-y: auto;
		height: calc(100% - 135px);
		margin-top: 15px;
		&::-webkit-scrollbar {
			width: 6px; /* 设置滚动条宽度 */
		}
		::-webkit-scrollbar-track {
			background-color: #171717; /* 设置轨道hover状态时的背景颜色 */
		}
		&::-webkit-scrollbar-thumb {
			background-color: #343434; /* 设置滑块背景颜色 */
			border-radius: 4px; /* 设置滑块圆角 */
		}
		.item {
			margin-top: 24px;
			background: rgba(249, 35, 86, 0.20);
			box-sizing: border-box;
			padding: 16px;
			&.error {
				background: rgba(249, 35, 86, 0.20);
				.up .title .icon {
					background: url(../../../assets/images/icon-error.png) center center no-repeat;
					background-size: cover;
				}
				.label {
					color: #F92356;
				}
			}
			&.warning {
				background: rgba(251, 170, 53, 0.20);
				.up .title .icon {
					background: url(../../../assets/images/icon-warning.png) center center no-repeat;
					background-size: cover;
				}
				.label {
					color: #FBAA35 !important;
				}
			}
			&.success {
				background: rgba(0, 220, 211, 0.20);
				.up .title .icon {
					background: url(../../../assets/images/icon-success.png) center center no-repeat;
					background-size: cover;
				}
				.label {
					color: #00DCD3 !important;
				}
			}
			.content {
				font-size: 12px;
				color: #E9EDF8;
				margin-top: 8px;
			}
			.up {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.time {
					font-size: 14px;
					color: #F1F3F9;
				}
				.title {
					display: flex;
					align-items: center;
					.label {
						font-size: 18px;
						color: #F92356;
						margin-left: 8px;
					}
					.icon {
						display: block;
						width: 20px;
						height: 20px;
						background: url(../../../assets/images/icon-error.png) center center no-repeat;
						background-size: cover;
					}
				}
			}
		}
	}
}